<template>
  <div class="container">
    <!-- banner -->
    <div class="bannerBox">
      <banner :topBannerData="bannerList" @handleItem="handleSwipe"></banner>
    </div>
    <!-- 中间菜单栏 -->
    <div class="menuList">
      <div class="menu-item" v-for="item in indexMenu" :key="item">
        <div class="menu-icon" @click="getData(item.id)">
          <i :class="item.icon"></i>
        </div>
        <div class="menu-text"><span>{{item.name}}</span></div>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="splitLine"></div>
    <!-- 推荐歌单 -->
    <div class="tuijianOrder displayBox">
      <tui-jian></tui-jian>
    </div>
    <!-- 新碟/新歌 -->
    <div class="newSongs displayBox">
      <new-songs></new-songs>
    </div>
    <!-- 最新mv -->
    <div class="displayBox">
      <new-mv></new-mv>
    </div>
  </div>
</template>

<script>
import Banner from '@/components/banner'
import TuiJian from '@/components/tuijian'
import NewSongs from '@/components/NewSongs'
import NewMv from '@/components/NewMv'
import http from '@/utils/index'
import api from '@/utils/api'
export default {
  data () {
    return {
      bannerList: [],
      indexMenu: [
        {id: 1, name: '每日推荐', icon: 'iconfont iconrili1'},
        {id: 2, name: '歌单', icon: 'iconfont icongedan'},
        {id: 3, name: '排行榜', icon: 'iconfont iconpaihangbang'},
        {id: 4, name: '电台', icon: 'iconfont icondiantai'},
        {id: 5, name: '直播', icon: 'iconfont iconzhibo-01'}
      ]
    }
  },
  components: {
    Banner,
    TuiJian,
    NewSongs,
    NewMv
  },
  created () {
    this.getBanner()
  },
  methods: {
    getBanner () {
      let params = {
        type: 1
      }
      http.request(api.bannerList, params, 'GET')
        .then((res) => {
          if (res.code === 200) {
            this.bannerList = res.banners
          }
        })
    },
    getData (id) {
      if (id === 1) {
        http.request(api.recommendSongs, 'GET')
          .then((res) => {
            if (res.code === 200) {
              console.log(res)
            }
          })
      }
    },
    handleSwipe (value) {
      console.log(value)
    }
  }
}
</script>

<style scoped>
@import '../../../static/icons/iconfont.css';
.container{
  padding: 0 0;
}
.bannerBox{
  width: 95%;
  height: 300rpx;
  padding: 10rpx;
  border-radius: 20rpx;
}
.menuList{
  display: flex;
  width: 95%;
  height: 170rpx;
  margin: 20rpx auto;
  justify-content: space-between;
  align-items: center;
}
.menuList .menu-item{
  display: flex;
  width: 20%;
  height: 100%;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
}
.menuList .menu-item .menu-icon{
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  background: #e8e8d0;
  border-radius: 50%;
}
.menuList .menu-item .menu-icon .iconfont{
  font-size: 24px;
  color: #fff;
}
.menuList .menu-item .menu-text{
  text-align: center;
  font-size: 26rpx;
  color: #000;
}
.splitLine{
  width: 100%;
  height: 1rpx;
  background: rgba(0, 0, 0, 0.05);

}
.displayBox{
  width: 100%;
  margin-top:30rpx;
}
</style>
